<template>
  <Menu :isSearch="false"></Menu>
  <div class="createSpace_box">
    <div class="createSpace_inputItem">
      <div style="margin-bottom: 10px;font-size: 20px;">空间名称:</div>
      <n-input v-model:value="spaceName" maxlength="30" show-count placeholder="请输入" size="large"/>
    </div>

    <div class="createSpace_inputItem">
      <div style="margin-bottom: 10px;font-size: 20px;">空间图片:</div>
      <div style="margin-bottom: 10px;">空间图片会作为空间头像和空间背景图展示</div>
      <uploadImg :max="1" @changeImageList="spaceImageList"></uploadImg>
    </div>

    <div class="createSpace_inputItem">
      <div style="margin-bottom: 10px;font-size: 20px;">空间描述:</div>
      <div style="margin-bottom: 10px;">详细描述一下你的空间，这将会吸引更多人加入呦</div>
      <n-input v-model:value="spaceDescription" type="textarea" placeholder="请输入" show-count
      :autosize="{
        minRows: 3,
      }"
      >
        <template #count="{ value }">
          {{ value.length }}
        </template>
      </n-input>
    </div>

    <div class="createSpace_inputItem">
      <div style="margin-bottom: 10px;font-size: 20px;">空间亮点:</div>
      <div style="margin-bottom: 10px;">说一说你的空间有什么亮点，支持图片呦 (没有亮点可以不填)</div>
      <n-input v-model:value="spaceBright" type="textarea" placeholder="请输入" show-count
      :autosize="{
        minRows: 3,
      }"
      >
        <template #count="{ value }">
          {{ value.length }}
        </template>
      </n-input>
      <div style="height: 20px;"></div>
      <uploadImg :max="3" @changeImageList="spaceBrightImageList"></uploadImg>
    </div>

    <div style="margin-top: 40px;">
      <n-button type="primary" size="large" @click="createSpace">
        创 建
      </n-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Menu from "../../components/Menu.vue"
import {createSpace as CreateSpace} from "../../api/space.ts";
import {ref,Ref} from "vue"
import uploadImg from "../../components/uploadImg.vue"
import { UploadFileInfo } from 'naive-ui'
import { useRouter } from "vue-router";
const router = useRouter()

let spaceName = ref("")
let spaceDescription = ref("")
let spaceBright = ref("")
let spaceImageUrls:Ref<string[]> = ref([])
let spaceBrightImageUrls:Ref<string[]> = ref([])

// 空间图片
const spaceImageList = (fileList: Array<UploadFileInfo>) => {
  console.log(fileList)
  fileList.forEach(e => {
    spaceImageUrls.value[0] = e.url as string
  })
}

// 空间亮点图片
const spaceBrightImageList = (fileList: Array<UploadFileInfo>) => {
  console.log(fileList)
  spaceBrightImageUrls.value = []
  fileList.forEach(e => {
    spaceBrightImageUrls.value.push(e.url as string)
  })
}

const createSpace = async () => {
  if(spaceName.value == ""){
    window.$message.warning("请输入空间名称")
    return
  }
  if(spaceDescription.value == ""){
    window.$message.warning("请描述你的空间")
    return
  }
  console.log("空间图片",spaceImageUrls.value)
  if(spaceImageUrls.value[0]){
    const res:any = await CreateSpace(handleParam())
    if(res.code != "200"){
      window.$message.warning(res.message)
    }else{
      window.$message.success("创建成功！")
      router.push("/home")
    }
  }else{
    window.$message.warning("请上传空间图片")
  }
}

type paramType = {
  spaceName: string,
  spaceImage: string,
  phone: string | null,
  spaceDescription: string,
  spaceBright: object
}
// 处理请求参数
const handleParam = ():paramType => {
  let phone = localStorage.getItem("token")
  let data:paramType = {
    spaceName: spaceName.value,
    spaceImage: spaceImageUrls.value[0],
    phone: phone,
    spaceDescription: spaceDescription.value,
    spaceBright: {
      text: spaceBright.value,
      image: spaceBrightImageUrls.value.join("@")
    }
  }
  return data
}
  
</script>

<style lang='scss' scoped>
  .createSpace_box{
    max-width: 900px;
    // text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    background-color: var(--bs-content-background);

    .createSpace_inputItem{
      width: 600px;
      margin-top: 30px;
    }
  }
</style>